<template>
    <div class="login-form">
        <div class="top">
        <van-nav-bar left-text="返回" left-arrow @click-left="onClickLeft" />
        </div>
        <img src="../../assets/my.png" alt="">
        <van-form @submit="onSubmit">
             <!-- <van-field 
                name="uploader" 
                label="上传头像">
               <template #input>
                   <van-uploader v-model="fileList" multiple />
               </template>
           </van-field> -->
            <van-field
                v-model="username"
                name="username"
                type="text"
                placeholder="账号"
                :rules="rules.username"
            />
            <van-field
                v-model="password"
                type="password"
                name="password"
                
                placeholder="密码"
                :rules="rules.password"
            />
            <van-field
                v-model="repass"
                type="password"
                name="repass"
                
                placeholder="确认密码"
                :rules="rules.repass"
            />
            <van-field
                v-model="tel"
                type="number"
                name="tel"
               
                placeholder="手机号"
                :rules="rules.tel"
            />
            <van-field
                v-model="email"
                type="email"
                name="email"
                
                placeholder="邮箱"
                :rules="rules.email"
            />
            <van-field
                v-model="nickname"
                type="text"
                name="nickname"
               
                placeholder="昵称"
                :rules="rules.nickname"
            />
            <div style="margin: 19px; font-size:18px">
                <van-button color="linear-gradient(to right, #ff9000, #ff5000)" round block type="info" native-type="submit">注册</van-button>
            </div>
        
            <div class="tologin">
                <router-link to="/my/login">已有账号，前往登录</router-link>    
            </div>
            </van-form>
    </div>
</template>

<script>
import Vue from 'vue';
import { Form } from 'vant';
import { Field } from 'vant';
import { register } from '@/request';
import { Toast } from 'vant';
import { NavBar } from 'vant';
import { Uploader } from 'vant';

Vue.use(Uploader);
Vue.use(NavBar);
Vue.use(Toast);
Vue.use(Form);
Vue.use(Field);

export default {
    data() {
        return {
            fileList: [
                { url: 'https://img01.yzcdn.cn/vant/leaf.jpg' },
                // Uploader 根据文件后缀来判断是否为图片文件
                // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明
                // { url: 'https://cloud-image', isImage: true },
            ],

            rules: {
                username: [
                    {
                        required: true,
                        message: '账号必填'
                    },
                    {
                        pattern:/^[a-zA-Z]\w{3,9}$/,
                        message:'必须字母开头,数字、字母、下划线组成，4~10位'
                    }
                ],
                    password: [
                        {
                            required: true,
                            message: '密码必填'
                        },
                        {
                            pattern:/^.{6,12}$/,
                            message:'长度在6~12位'
                        },
                    ],
                        repass:[
                            {
                                required:true,
                                message:'确认密码必填'
                            },
                            {
                                validator:this.validator,
                                message:'两次密码输入不一致!'
                            }
                        ],
                        tel:[
                            {
                                required: true,
                                message: '电话必填'
                            },
                            {
                                pattern:/^1[345789]\d{9}$/,
                                message:'请输入正确的手机号'
                            }
                        ],
                        email: [
                            {
                                required:true,
                                message:'请填写密码'
                            },
                            {
                                pattern:/(^[1-9]\d{4,9}@qq\.com$)|(^[a-zA-Z]\w{5,17}@((126|163)\.com|yeah\.net)$)/,
                                message:'请输入正确的邮箱地址'
                            }
                        ],
                        nickname: [
                            {
                                required:true,
                                message:'昵称必填'
                            },
                            {
                                pattern:/^[a-zA-Z][a-zA-Z0-9]{3,7}$/,
                                message:'昵称字母和数字组成，字母开头，4~8位'
                            }
                        ]
                    
            },
            username: '',
            password: '',
            repass:'',
            email:'',
            tel:'',
            nickname:''
        }
    },
    methods: {

        onSubmit(values) {
            var _this = this
            // console.log('submit', values);
            delete values.repass
            register(values).then(data => {
                // console.log(data);
                var {code,msg} = data
                if(code === 1) {
                    Toast.fail(msg);
                } else {
                    Toast.success({
                        message:msg,
                        onClose() {
                            _this.$router.push('/my/login')
                        }
                    });
                }
            })
            console.log('submit',values);
         },
         validator(val) {
                // 在这里进行验证，返回true表示通过，返回false表示不通过
            return this.password === this.repass
         },
        onClickLeft() {
            this.$router.push('/my')
        },
        // tologin() {
        //     this.$router.push('/my')
        // }
    }
}

</script>

<style scoped>
    .top{
        /*border-bottom: 1px solid #ccc; */
        padding: 1px 1px;
        display: flex;
        /* justify-content: flex-start;
        background: linear-gradient(to right, #ff9000, #ff5000); */
        /* align-items: center; */
    }
    .top>div:first-child{
        margin-right: 2px;
    }
    .top>div:last-child{
        flex: 1;
    }
    .tologin{
        float: right;
        margin: 10px 18px;
        font-size: 16px;
    }
    .tologin a{
        color: #969799;
    }
    .login-form {
        border-radius: 6px;
        background: #ffffff;
        width: 100%;
    }
    .title {
  margin: 0 auto 30px auto;
  text-align: center;
 
}

img {
    display: block;
    margin: 0 auto;
    box-shadow: 0 2px 4px #867f71;
    border-radius: 50%;
    width: 70px;
    height: 70px;
    margin-top: 60px;
    margin-bottom: 30px;
}
   

</style>